<template>
  <div id="PersonnalCenter" :style="`font-size:`+subjectFont+';'+`${isDark?'background-color:rgb(34,33,38) ':''}`" >
      <div id="background">
          <img :src="avatarUrl" alt="">
      </div>
      <div id="Person" :style="isDark?'background-color:rgb(34,33,38) ':''">
          <div id="avatar">
              <img :src="avatarUrl" alt="">
          </div>
          <div id="nickName" :style="isDark?'color:#fff':''">
              <span :style="`font-size:`+subjectFont">{{nickName}}</span>
          </div>
          <div id="selectButton">
              <el-button round size="small" @click="changeRouter">{{!setOrAbout?'修改资料':'关于我的'}}</el-button>
              <el-button size="small" type="danger" round @click="exitLogin">退出登录</el-button>
          </div>
          <div id="brief" :style="isDark?'color:#fff':''">
              <span :style="`font-size:`+(parseInt(subjectFont)-6)+`px`">{{brief}}</span>
          </div>
      </div>
      <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Message,Loading } from 'element-ui'
import { Person } from '../../api/Person'

export default {
    name:'PersonnalCenter',
    data() {
        return {
            setOrAbout:false,
            activeName:'1',
            nickName:'loading',
            brief:'loading',
            avatarUrl:'',
            collections:[],
            like:[]
        }
    },
    computed:{
         ...mapState(['subjectFont','isDark']),
         reflesh(){
             return this.$store.state.reflesh
         }
    },
    mounted(){
        this.getMsg()
        console.log(this.$router.currentRoute)
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getMsg(){
          let loadingInstance = Loading.service({ fullscreen: true });
          Person({
              url:'/getUserMsgs',
              method:'get'
          }).then(res=>{
                console.log(res)
                const data = res.data.result;
                return data
            }).then((data)=>{
                this.nickName = data.nickName;
                this.brief = data.brief
                this.avatarUrl = data.avatar
                this.collections = data.collections
                this.like = data.like
                this.setOrAbout = false
            }).then(()=>{
                this.$router.push({
                    name:'My',
                    params:{
                        collections:this.collections,
                        like:this.like
                    }
                })
                loadingInstance.close();
            }).catch(err=>{
                console.log(err)
            })
      },
      async exitLogin(){
            let storage = window.localStorage
            this.$bus .$emit('closeLoginOrResign',false)
            this.$bus .$emit('successLogin',false)
            storage.removeItem('token')
            //this.$router.push('/')
            await Message({
                showClose: true,
                message: '退出登录成功',
                type: 'success'
            });
            window.location.href = '../../'
      },
      changeRouter(){
          if(this.setOrAbout == false){
              this.setOrAbout = !this.setOrAbout
              this.$router.push('/person/config')
          }else{
              this.setOrAbout = !this.setOrAbout
              this.$router.push({
                    name:'My',
                    params:{
                        collections:this.collections,
                        like:this.like
                    }
                })
          }
      }
    },
    watch:{
        reflesh:{
            handler(newValue,oldValue){
                if(newValue == true){
                    this.getMsg()
                    this.$store.commit('Reflesh',oldValue)
                }
            }
        }
    }

}
</script>

<style scoped lang='less'>
    #PersonnalCenter{
        position: relative;
        margin-top:3rem ;
        height: 100vh;
        #background{
            width: 100%;
            height: 210px;
            overflow: hidden;
            img{
                width: 100%;
                filter: blur(3px);
            }
        }
        #Person{
            width: 100%;
            height: 150px;
            position: relative;
            #avatar{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                position: absolute;
                top:-40px;
                left: 12px;
                border:5px solid rgb(52,55,64) ;
                overflow: hidden;
                img{
                    width: 80px;
                    height: 80px;
                }
            }
            border-bottom: #999 1px solid;
            #nickName{
                position: absolute;
                top:60px;
                left: 24px;
            }
            #selectButton{
                position: absolute;
                right: 1px;
                top: 20px;
            }
            #brief{
                position: absolute;
                bottom: 10px;
                left: 10px;
                width: 90%;
                height: 55px;
                overflow: hidden;
                text-overflow: ellipsis;
                span{
                    font-size: 15px;
                }
            }
        }
    }
    /deep/.van-cell{
        background: none;
    }
    #selections{
        width: 100%;
    }
    #exitLogin{
        margin: 20px;
    }
    
</style>